<template>
	<div class="caseSearch">
		<div class="title" @click="comeBack()">
			<image src="../../static/icon_arrow_blue_left.png"></image>
			报告查询
		</div>

		<uv-tabs :list="list1" @click="click" activeStyle="color:#71D1AA;" lineColor="#71D1AA" :scrollable="false">
		</uv-tabs>
		<view v-show="tabs==1">
			<view class="content" v-for="(item,index) in list" :key="index" @click="goToInspectionReport(item.YZID)">
				<view class="content-box"> 
					<view>
						<view class="content-box-top">
							<view style="margin-right: 2prx; margin-left: 30rpx;">
						
							</view>
							<view>
								<uv-text :text="item.LB" color="#333" bold size="32rpx"></uv-text>
							</view>
						</view>
						<view class="content-footer-box">
							<view class="content-left-box">
								<view style="margin-top: 16rpx;">
									<uv-text :text="item.XMMC" color="#666" size="28rpx"></uv-text>
								</view>
								<view style="margin-top: 8rpx;">
								</view>
								<view style="margin-top: 24rpx;">
									<uv-text :text="item.SJ" color="#666" size="28rpx"></uv-text>
								</view>
								<view style="margin-top: 24rpx;">
									<uv-text :text="`开始时间:${!item.SJ?'暂无开始时间':item.SJ}`" color="#aaa"
										size="24rpx"></uv-text>
								</view>
								<view style="margin-top: 24rpx;">
									<uv-text :text="`完成时间:${!item.WCSJ?'暂无完成时间':item.WCSJ}`" color="#aaa"
										size="24rpx"></uv-text>
								</view>
							</view>

						</view>
					</view>

				</view>
			</view>

		</view>


		<view v-show="tabs==0">
			<view class="content" v-for="(item,index) in LIST" :key="index" @click="goToReportDetails(item.YZID)">
				<view class="content-box">
					<view>
						<view class="content-box-top">
							<view style="margin-right: 2prx; margin-left: 30rpx;">
						
							</view>
							<view>
								<uv-text :text="item.LB" color="#333" bold size="32rpx"></uv-text>
							</view>
						</view>
						<view class="content-footer-box">
							<view class="content-left-box">
								<view style="margin-top: 16rpx;">
									<uv-text :text="item.XMMC" color="#666" size="28rpx"></uv-text>
								</view>
								<view style="margin-top: 8rpx;">
								</view>
								<view style="margin-top: 24rpx;">
									<uv-text :text="item.SJ" color="#666" size="28rpx"></uv-text>
								</view>
								<view style="margin-top: 24rpx;">
									<uv-text :text="`开始时间:${!item.SJ?'暂无开始时间':item.SJ}`" color="#aaa"
										size="24rpx"></uv-text>
								</view>
								<view style="margin-top: 24rpx;">
									<uv-text :text="`完成时间:${!item.WCSJ?'暂无完成时间':item.WCSJ}`" color="#aaa"
										size="24rpx"></uv-text>
								</view>
							</view>

						</view>
					</view>

				</view>

			</view>

		</view>
	</div>

</template>

<script lang="ts">
	import { globalVariable } from '../../globalVariable/globalVariable';
	import { request } from '../../Providing/request';

	export default {
		data() {
			return {
				Page: {
					cardId: globalVariable.cardId,
					pagenow: 1,
					pagesize: 30,
				},
				list: [],
				LIST: [],
				list1: [{
					name: '检验报告', // recordJCQuery
				}, {
					name: '检查报告', // recordJYQuery
				}],
				tabs: 0,
			};
		},
		methods: {
			comeBack() {
				uni.$emit('goToHome');
			},
			click(item) {

				console.log('item', item);
				this.tabs = item.index
			},
			recordJCQuery() {
				new request().recordJCQuery(this.Page).then(res => {
					if (res['BGLIST']) {
						if (Array.isArray(res['BGLIST'].BG)) {
							this.list = res['BGLIST'].BG;
						} else {
							if (this.list.length == 0) {
								this.list.push(res['BGLIST'].BG)
							}
						}
					} else {
						this.list = []
					}
				})
			},
			goToInspectionReport(id){
				globalVariable.inspectionReportId = id;
				console.log("globalVariable.inspectionReportId",globalVariable.inspectionReportId)
				
				uni.$emit('goToInspectionReport')
			},
			goToReportDetails(id){
				globalVariable.reportDetailsId = id;
				console.log("globalVariable.reportDetailsId",globalVariable.reportDetailsId)
				uni.$emit('goToReportDetails')
			},
			recordJYQuery() {
				new request().recordJYQuery(this.Page).then(res => {
					if (res['BGLIST']) {
						if (Array.isArray(res['BGLIST'].BG)) {
							this.LIST = res['BGLIST'].BG;
						} else {
							if (this.LIST.length == 0) {
								this.LIST.push(res['BGLIST'].BG)
							}
						}
					} else {
						this.LIST = []
					}
				})
			}
		},
		created() {
			this.recordJCQuery()
			this.recordJYQuery()
		}

	}
</script>

<style lang="scss">
	.caseSearch {
		height: 800px;

		.title {
			width: 100%;
			height: 40px;
			line-height: 40px;
			margin-left: 10px;
			color: #2f59f3;
			letter-spacing: 25px;
			text-indent: 10px;
			margin: auto;
			padding-left: 20px;
			background-color: #fff;

			image {
				width: 15px;
				height: 30px;
				top: 5px;
				float: left;


			}
		}



.tab {
		width: 100%;
		height: 90rpx;
	}

	.top {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 268rpx;
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		background-color: #71D1AA;

		.top-title {
			width: 93%;
			height: 42rpx;
			margin: auto;
			margin-top: 24rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
		}

		.top-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 93%;
			height: 136rpx;
			margin: auto;
			margin-top: 24rpx;
			border-radius: 24rpx;
			background: #F9F9F9;

			.left-box {
				display: flex;
				// flex-direction: column;
				align-items: center;
				margin-left: 30rpx;
				// margin: 28rpx 0 0 30rpx;

				.left-box-top {
					display: flex;
					align-items: center;

					.min-box {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 140rpx;
						height: 36rpx;
						background: #71D1AA;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #fff;
						margin-left: 8rpx;
					}
				}
			}

			.right-box {
				display: flex;
				align-items: center;
				width: 180rpx;
				height: 58rpx;
				background: #F6F8FB;
				border-radius: 10rpx;
				color: #71D1AA;
				font-size: 28rpx;
				border: 2rpx solid #71D1AA;
				margin-right: 24rpx;
			}
		}
	}

	.content {
		width: 93%;
		margin: auto;

		.content-title {
			margin: 32rpx 0;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}

		.content-box {
			width: 100%;
			// height: 290rpx;
			border-radius: 24rpx;
			border: 2rpx solid #F6F8FB;
			padding-bottom: 20rpx;

			.content-box-top {
				display: flex;
				align-items: center;
				width: 100%;
				height: 78rpx;
				border-bottom: 2rpx solid #F6F8FB;
			}

			.content-footer-box {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.content-left-box {
					margin-left: 24rpx;
				}

				.content-right-box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 36rpx;
				}
			}
		}
	}

	.noData {
		width: 500rpx;
		margin-left: 142rpx;
		margin-top: 50rpx;

		image {
			width: 100%;
		}
	}
	}
</style>